<div class="row">
  <div class="col-md-12">
    <div ba-panel ba-panel-title="Ion Range Slider" ba-panel-class="with-scroll">
      <div class="slider-box">
        <h5>Basic</h5>
        <ion-slider type="single"
                    grid="false"
                    min="0"
                    max="100"
                    from="45"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>With prefix</h5>
        <ion-slider type="single"
                    grid="true"
                    min="100"
                    max="1200"
                    prefix="$"
                    from="420"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>With postfix</h5>
        <ion-slider type="single"
                    grid="true"
                    min="-90"
                    max="90"
                    postfix="°"
                    from="36"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>Two way range</h5>
        <ion-slider type="double"
                    grid="true"
                    min="100"
                    max="1200"
                    from="420"
                    to="900"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>With Steps</h5>
        <ion-slider type="single"
                    grid="true"
                    min="0"
                    max="1000"
                    from="300"
                    step="50"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>Decorating numbers</h5>
        <ion-slider type="single"
                    grid="true"
                    min="0"
                    max="1000000"
                    from="300000"
                    step="1000"
                    prettify-separator="."
                    prettify="true"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>Using custom values array</h5>
        <ion-slider type="single"
                    grid="true"
                    from="5"
                    step="1000"
                    values="['January', 'February', 'March',
                            'April', 'May', 'June',
                            'July', 'August', 'September',
                            'October', 'November', 'December']"
                    disable="false">
        </ion-slider>
      </div>
      <div class="slider-box">
        <h5>Disabled</h5>
        <ion-slider type="single"
                    grid="false"
                    min="0"
                    max="100"
                    from="45"
                    disable="true">
        </ion-slider>
      </div>
    </div>
  </div>
</div>